<template>
  <view class="more">
    <!-- 模块2 -->
    <view class="chat-box">
      <!-- 不让他看我的订单 -->
      <view class="chat-records">
        <view class="char-left">
          不让他看我的订单
        </view>
        <view class="chat-right">
          <u-switch v-model="value" @change="change" activeColor="#FF2A31"></u-switch>
        </view>
      </view>
      <!-- 不看他的订单 -->
      <view class="chat-records">
        <view class="char-left">
          不看他的订单
        </view>
        <view class="chat-right">
          <u-switch v-model="value2" @change="change2" activeColor="#FF2A31"></u-switch>
        </view>
      </view>
      <!-- 间隔槽 -->
      <u-gap height="10" bgColor="#F5F5F5"></u-gap>
      <!-- 间隔槽 -->
      <!-- 把他推荐给朋友 -->
      <view class="chat-records" @click="toForward()">
        <view class="char-left">
          把他推荐给朋友
        </view>
        <view class="chat-right">
          <image src="../../static/message/more.png" mode=""></image>
        </view>
      </view>
      <!-- 投诉 -->
      <view class="chat-records" @click="toComplaint()">
        <view class="char-left">
          投诉
        </view>
        <view class="chat-right">
          <image src="../../static/message/more.png" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 模块2 -->
    <!-- 间隔槽 -->
    <u-gap height="10" bgColor="#F5F5F5"></u-gap>
    <!-- 间隔槽 -->
    <!-- 删除-->
    <view class="delete" @click="show=true">
      删除
    </view>
    <!-- 模态框 -->
    <view class="modal">
      <u-modal :show="show" :content='content' showCancelButton closeOnClickOverlay @confirm="confirm" @cancel="cancel"
        @close="close" cancelColor="#AAAAAA" confirmColor="#FF2A31" confirmText="确认"></u-modal>
    </view>
    <!-- 模态框 -->
  </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: true,
        value2: false,
        show: false,
        content: '确认删除吗？'
      };
    },
    methods: {
      change(e) {
        console.log('change', e);
      },
      change2(e) {
        console.log('change2', e);
      },
      confirm() {
        this.show = false
        console.log('confirm');
      },
      cancel() {
        this.show = false
        console.log('cancel');
      },
      close() {
        this.show = false
        console.log('close');
      },
      toForward() {
        uni.navigateTo({
          url: '/pages/message/forward'
        })
      },
      toComplaint() {
        uni.navigateTo({
          url: '/pages/message/complaint'
        })
      },
    }
  }
</script>

<style lang="scss">
  .more {

    // 模块2
    .chat-box {
      background-color: #fff;

      .chat-records {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 5vw;
        border-bottom: 1px solid #F5F5F5;

        .char-left {
          font-size: 36rpx;
        }

        .chat-right {
          image {
            width: 25rpx;
            height: 40rpx;
            vertical-align: middle;
          }
        }
      }

      .chat-records:last-child {
        border-bottom: none;
      }
    }

    .delete {
      background-color: #fff;
      text-align: center;
      padding: 30rpx 0;
      color: #f00;
      font-size: 36rpx;
    }

    // 模态框
    .modal {
      text-align: center;
    }
  }
</style>